<template>
  <div class="assets-dialog flex-center">
    <div class="dialog">
      <div class="head">
        <span>查看资产 UID：</span>
        <span class="uid">{{uid}}</span>
        <i class="iconfont iconguanbi" @click="$emit('cancel')"></i>
      </div>
      <div class="assets-body">
        <el-table
          :data="assets"
          style="width: 100%"
          border
          :summary-method="totalAssets"
          sum-text="总资产"
          size="medium"
          header-cell-class-name="headerStyle"
        >
          <el-table-column prop="currency" label="币种" align="center"></el-table-column>
          <el-table-column prop="value" label="数量" width="200">
            <template slot-scope="item">{{item.row.active}}</template>
          </el-table-column>
        </el-table>
      </div>
      <div class="assets-operate" v-if="openTransfer">
        <el-button class="close" type="primary" size="medium" @click="$emit('transaction',1)">资产充值</el-button>
        <el-button class="close" type="primary" size="medium" @click="$emit('transaction',2)">资产扣除</el-button>
      </div>
    </div>
    <div class="bg" @click="$emit('cancel')"></div>
  </div>
</template>
<script>
export default {
  props: ["assets", "uid"],
  computed: {
    openTransfer() {
      return process.env.VUE_APP_TRANSFER === "true";
    }
  },
  methods: {
    // 合计总资产
    totalAssets(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总资产";
          return;
        }
        console.log(data, "dada");
        const values = data.map(item => Number(item["active"]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] = sums[index].toFixed(2) + " ￥";
        } else {
          sums[index] = "0 ￥";
        }
      });
      return sums;
    }
  }
};
</script>

<style lang="scss" scoped>
.assets-dialog,
.bg {
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.dialog {
  position: relative;
  z-index: 20;
  width: 350px;
  padding: 18px 25px;
  margin-top: -100px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 20px 0px rgba(61, 118, 249, 0.18);

  .iconguanbi {
    float: right;
    font-size: 18px;
    cursor: pointer;
  }

  .head {
    color: #606266;

    span {
      font-size: 16px;
    }
  }

  .assets-body {
    margin: 30px auto;
  }

  .assets-operate {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .close {
    float: right;
  }
}
</style>
<style lang='scss'>
// .assets-dialog .el-table__body-wrapper::-webkit-scrollbar {
//   background: #e8e9ee;
//   height: 5px;
//   width: 5px;
// }
// .assets-dialog .el-table__body-wrapper::-webkit-scrollbar-track {
//   width: 5px;
//   border-radius: 2px;
//   background: rgba(233, 233, 233, 0.2);
// }
// .assets-dialog .el-table__body-wrapper::-webkit-scrollbar-thumb {
//   border-radius: 50px;
//   background: rgba(144, 147, 153, 0.3);
// }
</style>

